@import "../../resources/css/_core"
$homeImg: $resourcesPathAbs + "/img/home"

.ei-slider
    position: relative
    width: 100%
    max-width: 1920px
    height: 310px
    margin: 0 auto
.ei-slider-loading
    width: 100%
    height: 100%
    position: absolute
    top: 0px
    left: 0px
    z-index: 999
    background: rgba(0,0,0,0.9)
    color: #fff
    text-align: center
    line-height: 310px
.ei-slider-large
    margin: auto
    height: 290px
    width: 920px
    position: relative
    overflow: hidden
.ei-slider-large li
    position: absolute
    top: 0px
    left: 0px
    overflow: hidden
    height: 100%
    width: 100%
.ei-title
    position: absolute
    right: 50%
    margin-right: 13%
    top: 30%
.ei-title h2, .ei-title h3
    text-align: right

.ei-title h2
    font-size: 40px
    line-height: 50px
    font-family: 'Playfair Display', serif
    font-style: italic
    color: #b5b5b5

.ei-title h3
    font-size: 70px
    line-height: 70px
    font-family: 'Open Sans Condensed', sans-serif
    text-transform: uppercase
    color: #000

.ei-slider-thumbs
    height: 13px
    margin: 0 auto
    position: relative

.ei-slider-thumbs li
    position: relative
    float: left
    height: 100%

.ei-slider-thumbs li.ei-slider-element
    top: 0px
    left: 0px
    position: absolute
    height: 100%
    z-index: 10
    text-indent: -9000px
    background: #000
    background: rgba(0,0,0,0.9)

.ei-slider-thumbs li a
    display: block
    text-indent: -9000px
    background: #666
    width: 100%
    height: 100%
    cursor: pointer
    -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3), 0px 1px 0px 1px rgba(255,255,255,0.5)
    -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3), 0px 1px 0px 1px rgba(255,255,255,0.5)
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3), 0px 1px 0px 1px rgba(255,255,255,0.5)
    -webkit-transition: background 0.2s ease
    -moz-transition: background 0.2s ease
    -o-transition: background 0.2s ease
    -ms-transition: background 0.2s ease
    transition: background 0.2s ease

.ei-slider-thumbs li a:hover
    background-color: #f0f0f0

.ei-slider-thumbs li img
    position: absolute
    bottom: 50px
    opacity: 0
    z-index: 999
    max-width: 100%


.ei-slider-thumbs li:hover img
    opacity: 1
    bottom: 13px

@media screen and (max-width: 830px) 
    .ei-title
        position: absolute
        right: 0px
        margin-right: 0px
        width: 100%
        text-align: center
        top: auto
        bottom: 10px
        background: #fff
        background: rgba(255,255,255,0.9)
        padding: 5px 0

.ei-title h2, .ei-title h3
    text-align: center

.ei-title h2
    font-size: 20px
    line-height: 24px

.ei-title h3
    font-size: 30px
    line-height: 40px


.home-content
    position: relative
    padding: 30px 10px
    .home-introduction
        display: inline-block
        width: 570px
        height: 180px
        vertical-align: top
        background: url($homeImg + "/line_bg.png") no-repeat center top
        background-size: contain
        padding-top: 12px
        .home-introduction-title
            font-size: 18px
            font-weight: bolder
            padding-left: 18px
        .home-introduction-content
            font-size: 14px
            line-height: 2em
        .home-introduction-more
            float: right
            position: relative
            top: 5px
    .home-video
        position: absolute
        top: 0
        right: 10px
        text-align: center
        border: 1px solid #6f82ad
        +border-radius(14px)
        padding: 5px 10px 0 10px
        .home-video-title
            position: relative
            top: 24px




